<style>
    #demoLayui-liu li{
        position: relative;
    }
    .liu-load{
        overflow: hidden;
    }
    .layui-flow-more{
        padding: 10px;
        clear: both;
    }
    .liu-load li{
        width: 280px;
        border:solid 1px #EEEEEE;
        box-shadow: 0 0 3px 0px rgba(0,0,0,.1);
        overflow: hidden;
        margin: 20px 20px 0 0;
        float: left;
    }
    .liu-load-top{
        height: 157px;
        position: relative;
        overflow: hidden;
    }
    .liu-load-top .liu-load-top-img{
        position: absolute;
        top:0px;
        left:0px;
        width: 100%;
    }
    .liu-load-top-title{
        width: 270px;
        height: 60px;
        line-height: 30px;
        background: rgba(0,0,0,.3);
        position: absolute;
        bottom:0px;
        left:0px;
        z-index: 1;
        padding: 0 5px;
        color: #FFFFFF;
    }
    .liu-load-tool{
        background: #FFFFFF;
        padding: 0 10px;
    }
    .liu-load-tool .liu-load-tool-pic,.liu-load-tool .liu-load-tool-no{
        height: 30px;
        line-height: 30px;
        position: relative;
    }
    .liu-load-tool-pic span{
        color: red;
        font-size: 16px;
        font-weight: bold;
    }
    .liu-load-tool-no span{
        position: absolute;
        right: 0;
    }
    .liu-load-tool-no span a{
        cursor: pointer;
        margin-left: 3px;
    }
    .liu-load-tool-no span a .layui-icon{
        font-size: 16px;
    }
    .liu-load-tool-no span a .layui-icon:hover{
        font-weight: bold;
        color: #5FB878;
    }
    .my-pages{
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        text-align: right;
        margin-top: 20px;
    }
    .my-pages span{
        color: red;
        font-weight: bold;
        font-size: 14px;
        margin: 0 2px;
    }
    .my-reload{
        overflow: hidden;
        margin-bottom: 10px;
    }
    .my-reload p{
        line-height: 30px;
    }
    .my-reload p span{
        padding: 3px 7px;
        margin: 0 10px;
        cursor: pointer;
    }
    .my-reload p span:hover{
        background: #01AAED;
        color: #FFFFFF;
    }
    .my-reload p span.cur{
        background: #5FB878;
        color: #FFFFFF;
    }
    .liu-load-top-jx{
        position: absolute;
        top:0px;
        left:0px;
        z-index: 2;
        padding: 2px 10px;
        background: rgba(95, 184, 120, 0.6);
        color: white;
    }
</style>
<blockquote class="layui-elem-quote">{$title}</blockquote>
<div class="my-reload">
    <p data-type="cate">分类：<span {notpresent  name="cate"}class="cur"{/notpresent}>全部</span>{notempty name="cateList"}{volist name="cateList" id="vo"}<span data-val="{$vo.config_id}" {eq name="cate" value="$vo.config_id"}class="cur"{/eq}>{$vo.config_name}</span>{/volist}{/notempty}</p>
    <p data-type="layct">层次：<span {notpresent  name="layct"}class="cur"{/notpresent}>全部</span><span data-val="1" {eq name="layct" value="1"}class="cur"{/eq}>一层</span><span data-val="2" {eq name="layct" value="2"}class="cur"{/eq}>二层</span><span data-val="3" {eq name="layct" value="3"}class="cur"{/eq}>三层</span><span data-val=">3" {eq name="layct" value=">3"}class="cur"{/eq}>三层以上</span></p>
</div>
<div class="demoTable">
    关键字：
    <div class="layui-inline" style="width:400px;">
        <input class="layui-input" id="demoReload" autocomplete="off" placeholder="请输入标题,编号搜索" value="{$keyword}" >
    </div>
    <button class="layui-btn" data-type="reload" data-url="{:url('Drawings/drawingBankList')}" id="reloadBtn">搜索</button>
    <button class="layui-btn" data-type="add"><i class="layui-icon">&#xe608;</i>接口图纸列表</button>
    <div class="my-pages">共<span>{$count}</span>条数据</div>
</div>
<div class="liu-load">
    <ul id="demoLayui-liu">
    </ul>
</div>
<div class="dian-top"><i class="layui-icon" style="font-size: 40px;font-weight: bold;">&#xe604;</i></div>
<script>
    layui.use('flow', function(){
        var flow = layui.flow;
        flow.lazyimg({
            elem: '#demoLayui-liu img'
            ,scrollElem:'.layui-body'
        });
        flow.load({
            elem: '#demoLayui-liu' //流加载容器
            ,scrollElem:'.layui-body'
            ,mb: 600
            ,done: function(page, next) { //执行下一页的回调
                if ($("#demoLayui-liu").length > 0) {
                    var lis = [];
                    var param = getUrl();//获取参数
                    var url = '{:url("Drawings/drawingBankList",["table"=>1])}?keyword={$keyword}&page=' + page  + param;
                    $.get(url, function (res) {
                        layui.each(res.data, function (index, item) {
                            var imgStr = 'src';
                            if (page > 1) {
                                imgStr = 'lay-src';
                            }
                            var sell = '<a title="上架"><i class="layui-icon">&#xe62f;</i></a>';
                            if (parseInt(item.sell) > 0) {
                                sell = '<a title="下架"><i class="layui-icon">&#xe601;</i></a>';
                            }
                            lis.push(
                                '<li data-id="' + item.drawing_bank_id + '" data-no="' + item.no + '" >' +
                                '    <div class="liu-load-top">' +
                                '        <div class="liu-load-top-title">' + item.topic + '</div>' +
                                '        <img ' + imgStr + '="' + item.cover + '" class="liu-load-top-img"/>' +
                                '    </div>' +
                                '<span class="liu-load-top-jx">' + item.no2_name  + (parseInt(item.drawing_id) > 0 ? " 已发布":"") +'</span>' +
                                '    <div class="liu-load-tool">' +
                                '        <div class="liu-load-tool-pic">价格：<span>￥' + item.price + '</span></div>' +
                                '        <div class="liu-load-tool-no">' +
                                item.no +
                                '            <span class="liu-load-btn">' +
                                '                <a title="编辑" data-type="edit"><i class="layui-icon">&#xe609;</i></a>' +
                                '                <a title="删除" data-type="del"><i class="layui-icon">&#xe640;</i></a>' +
                                '            </span>' +
                                '        </div>' +
                                '    </div>' +
                                '</li>'
                            );
                        });
                        next(lis.join(''), page < res.count);
                        bindClick();
                    });
                }
            }
        });
    });
    $('.layui-btn').click(function () {
        var myUrl = $(this).attr('data-url');
        var myType = $(this).attr('data-type');
        if(myType == "1" && myUrl != ''){
            menu_sub(myUrl);
        }else if(myType == "reload" && myUrl != ''){
            var param =  getUrl();//获取参数
            myUrl += '?keyword='+$('#demoReload').val()  + param;
            menu_sub(myUrl);
        }else if(myType == "add" && myUrl != ''){
            layui_open("{:url('Drawings/getApiImg')}",{},'添加库图纸');
        }
    });
    //回到顶部特效
    $('.dian-top').click(function () {
        $('.layui-body').animate({ scrollTop: 0 }, 500);
    });
    //搜索点击事件
    $('.my-reload').find('span').click(function () {
        if($(this).is('.cur')){
            //取消操作
            $(this).removeClass('cur');
        }else{
            //筛选操作
            $(this).parent('p').find('span').removeClass('cur');
            $(this).addClass('cur');
        }
        var param =  getUrl();//获取参数
        console.log(param);
        var myUrl = "{:url('Drawings/drawingBankList')}";
         myUrl += '?keyword='+$('#demoReload').val()  + param;
        menu_sub(myUrl);
    });
    $("#demoReload").keydown(function(event){
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13'){
            //回车触发
            $('#reloadBtn').trigger('click');
        }
    });
    //获取参数连接
    function getUrl() {
        var param = '';
        $('.my-reload').find('.cur').each(function () {
            var my_val = $(this).attr('data-val');
            var my_name = $(this).parent('p').attr('data-type');
            if(!isNull(my_val)){
                param += my_name + '=' + my_val + '&';
            }
        });
        param = param.substring(0,param.length-1);
        return isNull(param) ? "" : "&"+param;
    }
    //图纸操作事件
    function bindClick() {
        $('#demoLayui-liu').find('li').each(function () {
            $(this).find('a').unbind('click');
            $(this).find('a').click(function () {
                var id = $(this).closest('li').attr('data-id');
                var no = $(this).closest('li').attr('data-no');
                var type = $(this).attr('data-type');
                if(type == 'del'){
                    //删除操作
                    layer.confirm('确定删除库图纸，编号《'+no+'》？', {
                        btn: ['确定','取消'],
                        title:'删除库图纸',
                        skin: 'layui-layer-lan',
                        icon: 0,
                    }, function(){
                        post_sub("{:url('Drawings/drawingBankDel')}",{drawing_bank_id:id},false,false);
                    });
                }else if(type == 'edit'){
                    //编辑
                    layui_open("{:url('Drawings/releaseDrawing')}",{drawing_bank_id:id},'发布库图纸');
                }
            });
        });
    }
</script>